<script setup>
import { ref, computed } from "vue";
    const name=ref('姓名：李承泽')
    const age=ref(21)
    const hobbies=ref(['篮球', '唱歌', '网球'])
    const major=ref('软件技术')
    const signature=ref( `
              <div class="signature">
                <p>欢迎来到我的世界！</p>
                <p>我是<span>李承泽</span>，一个热爱<span>运动</span>和<span>音乐</span>的年轻人。</p>
                <p>如果你有任何问题，请随时<a href="mailto:1067904242@qq.com">联系我</a>。</p>
              </div>
            `   )   
</script>

<template>
  <div id="counter">
      <div class="info-container">
         <h2>个人基本信息</h2>
         <dl>
             <dt>姓名：</dt>
             <dd>{{ name }}</dd>

             <dt>年龄：</dt>
             <dd>{{ age }}</dd>

             <dt>兴趣爱好：</dt>
             <dd>{{ hobbies.join('、') }}</dd>

             <dt>专业：</dt>
             <dd v-text="major"></dd>

             <dt>个性签名：</dt>
             <dd v-html="signature"></dd>
         </dl>
     </div>
   </div>
</template>

<style scoped>
 body {
          font-family: Arial, sans-serif;
          max-width: 600px;
          margin: 20px auto;
          padding: 20px;
      }
      .info-container {
          border: 1px solid #e0e0e0;
          border-radius: 8px;
          padding: 20px;
      }
      dt {
          font-weight: bold;
          margin-top: 10px;
          color: #2c3e50;
      }
      dd {
          margin-left: 0;
          color: #7f8c8d;
      }
      .signature {
          background-color: #f9f9f9;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          margin-top: 10px;
      }
      .signature p {
          margin: 0;
      }
      .signature span {
          color: #e74c3c;
          font-weight: bold;
      }
      .signature a {
          color: #3498db;
          text-decoration: none;
      }
</style>
